<template>
  <view class="question-container">
    <!-- 题目标题 -->
    <view class="cu-bar bg-white solid-bottom">
      <view class="action text-black">
        <text class="cuIcon-title text-red"></text>{{ subject.title }}
      </view>
    </view>

    <!-- 选项区域 -->
    <view class="options-container">
      <Options
        v-if="subject.test_type === 1 || subject.test_type === 2"
        :type="subject.test_type"
        :options="subject.optionList"
        :selected="subject.userAnswer"
        :correctAnswer="subject.answer"
        :showError="subject.showAnswer && subject.userAnswer !== subject.answer"
        @change="handleChange"
      />
      <view v-else>
        <text>未知题型，暂不支持显示。</text>
      </view>

      <!-- 多选题的确定按钮 -->
      <view v-if="subject.test_type === 2" class="button-container">
        <button
          class="submit-button"
          :class="{ 'disabled': !subject.userAnswer || subject.userAnswer.length === 0 }"
          @tap="submitAnswer"
          :disabled="!subject.userAnswer || subject.userAnswer.length === 0"
        >
          <text class="button-text">确定</text>
        </button>
      </view>
    </view>

    <!-- 答案和解释区域 -->
    <view v-show="subject.showAnswer" class="answer-container">
      <view class="cu-bar answer-section">
        <view class="action">
          <text class="answer-label">正确答案：</text>
          <text class="answer-content">{{ subject.answer }}</text>
        </view>
      </view>
      <view v-if="subject.explain" class="explain-section">
        <view class="explain-label">解析：</view>
        <view class="explain-content">{{ subject.explain }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import Options from './Options.vue';

export default {
  components: {
    Options
  },
  props: {
    subject: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 处理选项变化
    handleChange(answer) {
      if (this.subject.test_type === 1) {
        // 单选题：直接提交答案并显示正确答案
        this.$emit('submit', answer);
        this.$emit('show-answer', true);
      } else if (this.subject.test_type === 2) {
        // 多选题：仅更新选中状态，不提交答案
        this.$emit('update-answer', answer);
      }
    },
    // 提交多选题答案
    submitAnswer() {
      if (this.subject.test_type === 2) {
        // 多选题：提交答案并显示正确答案
        this.$emit('submit', this.subject.userAnswer);
        this.$emit('show-answer', true);
      }
    }
  }
};
</script>

<style scoped>
.question-container {
  padding: 20rpx;
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.options-container {
  padding: 30rpx 0;
  flex: 1;
}

.button-container {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
}

.submit-button {
  width: 320rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background: linear-gradient(135deg, #0071BC, #1E90FF);
  box-shadow: 0 4rpx 12rpx rgba(0, 113, 188, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.3s ease;
}

.submit-button:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(0, 113, 188, 0.2);
}

.submit-button.disabled {
  background: #ccc;
  box-shadow: none;
}

.button-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
}

.answer-container {
  margin-top: 30rpx;
  padding: 24rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.answer-section {
  padding: 12rpx 0;
}

.answer-label {
  color: #666;
  font-size: 28rpx;
  margin-right: 16rpx;
}

.answer-content {
  color: #0071BC;
  font-weight: bold;
  font-size: 32rpx;
}

.explain-section {
  margin-top: 24rpx;
  padding: 16rpx 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.explain-label {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 12rpx;
}

.explain-content {
  color: #333;
  font-size: 28rpx;
  line-height: 1.6;
  white-space: pre-wrap;
}
</style>